<template>
  <!-- 复选列表数据 -->
  <div class="app-tree">
    <p>{{ title }}</p>
    <el-tree
      class="menu-tree"
      :data="treeList"
      :props="defaultProps"
      empty-text="暂无数据"
      @node-click="handleNodeClick"
    />
  </div>
</template>

<script>
//把数据格式化tree格式数据
import formatTree from "@/utils/formatTree";
//API接口
import api from "@/api";

export default {
  props: {
    title: {
      type: String,
    },
  },
  data() {
    return {
      treeList: [], //树列表
      defaultProps: {
        children: "children",
        label: "label",
      }, //树主要参数
    };
  },
  /**
   * 页面挂载函数
   */
  mounted() {
    //调用Tree方法
    this.getTreeList();
  },
  /**
   * 方法
   */
  methods: {
    /**
     * 获取Tree列表
     */
    async getTreeList() {
      api.assetCatalog
        .treeList()
        .then((res) => {
          this.treeList = formatTree(res.data, 0);
        })
        .catch((err) => {
          this.$message.error(err.msg);
        });
    },
    /**
     * 点击Tree节点
     * @param {Object} node
     */
    async handleNodeClick(data) {
      //子组件告诉父组件改变值
      this.$emit("handleNodeClick", data);
    },
  },
};
</script>

<style lang="less" scoped></style>
